<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Slider</title>

<script>

	function next()
	{
		var $prev = document.getElementById("prev");
		var $next = document.getElementById("next");
		
		var $flag = document.getElementById("1");
		if ($flag.name == "1")
			{ $flag.src = "../Resources/2.jpg"; $flag.name = "2"; $prev.style.visibility="visible";}
		else if ($flag.name == "2")
			{ $flag.src = "../Resources/3.jpg"; $flag.name = "3"; }
		else if ($flag.name == "3")
			{ $flag.src = "../Resources/4.jpg"; $flag.name = "4"; }
		else if ($flag.name == "4")
			{ $flag.src = "../Resources/5.jpg"; $flag.name = "5"; $next.style.visibility="hidden";}
	}
	
	function previous()
	{
		var $prev = document.getElementById("prev");
		var $next = document.getElementById("next");
		
		var $flag = document.getElementById("1");
		if ($flag.name == "5")
			{ $flag.src = "../Resources/4.jpg"; $flag.name = "4"; $next.style.visibility="visible";}
		else if ($flag.name == "4")
			{ $flag.src = "../Resources/3.jpg"; $flag.name = "3"; }
		else if ($flag.name == "3")
			{ $flag.src = "../Resources/2.jpg"; $flag.name = "2"; }
		else if ($flag.name == "2")
			{ $flag.src = "../Resources/1.jpg"; $flag.name = "1"; $prev.style.visibility="hidden";}
	}

</script>

</head>

<body>

	<div id="div1" style="visibility:visible">
    	<img src="../Resources/1.jpg" alt="not visible" width="200" height="150" border="2" id="1" name="1"/>
    </div>

    <input type="button" id="prev" value="Prev" onclick="previous()" style="visibility:hidden"  /> 
    <input type="button" id="next" value="Next" onclick="next()" style="visibility:visible" />

</body>

</html>
